<template>
  <div>
    <el-popover
      placement="left-end"
      popper-class="popper-hi"
      trigger="hover"
      @show="showPopver"
      v-model="visible"
    >
      <div class="hover" @click="open">
        <div class="title">
          {{ scancode }}
        </div>

        <div class="text">
          <vue-qr :text="scancode" :size="200" :margin="0"></vue-qr>
        </div>
        <div class="loading" v-show="lodaingvisible">加载中...</div>
      </div>

      <div class="upgrade" slot="reference" @click="open">
        <div class="name">小白</div>
        <img class="xiaohe" src="@/assets/xiaohe.png" alt="" />
        <!-- <img class="hi" src="../img/hi.png" alt=""> -->
      </div>
    </el-popover>
  </div>
</template>

<script>
import vueQr from "vue-qr/src/packages/vue-qr.vue";
import { getIPtoCode } from "@/http/api/cpu";

export default {
  components: {
    vueQr,
  },

  data() {
    return {
      lodaingvisible: true,
      visible: false,
      scancode: "",
    };
  },
  methods: {
    open() {},
    showPopver() {
      // 显示时触发
      this.lodaingvisible = true;
      //取插件控制码
      getIPtoCode("0").then((response) => {
        this.lodaingvisible = false;
        this.scancode = response.data.data;
        if (
          this.scancode == undefined ||
          this.scancode == null ||
          this.scancode.length < 11
        ) {
          this.$message.error("未启动插件 或插件异常！");
          this.lodaingvisible = true;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.popper-hi {
  min-width: auto;
  padding: 0;
  width: 240px;
  height: 270px;
}
</style>

<style lang="scss" scoped>
.hi {
  width: 100px;
  position: absolute;
  top: -20px;
  left: -80px;
  animation: flash 5s 0.2s linear infinite;
}
.text {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 14px;
  color: #515e78;
  margin-top: 10px;
  line-height: 24px;
  pre {
    white-space: pre-line;
  }
}
.title {
  font-size: 16px;
  font-weight: bold;
  color: #515e78;
  text-align: center;
}
.hover {
  width: 240px;
  height: 260px;
  background-size: 100% 100%;
  position: absolute;
  right: 0;
  padding: 10px 20px;
  box-sizing: border-box;
}
.loading {
  width: 230px;
  height: 250px;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0px;
  right: 5px;
  text-align: center;
  line-height: 240px;
  color: #409eff;
}
.name {
  width: 23px;
  background: #4a86ff;
  color: #fff;
  border-radius: 4px;
  margin-left: 20px;
  padding: 6px 4px;
  font-size: 10px;
  box-sizing: border-box;
  line-height: 1;
}
.upgrade {
  position: fixed;
  right: 0;
  bottom: calc(30% - 120px);
  z-index: 2001;
  cursor: pointer;
  &:hover .hi {
    opacity: 0;
    animation: none;
  }
}
.xiaohe {
  width: 58px;
  animation: changes 1.6s 0.2s linear infinite;
  transform-origin: right bottom;
  position: absolute;
  top: -55px;
}
@keyframes changes {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-12deg);
  }
  40% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes flash {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  11% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  31% {
    opacity: 1;
  }
}
</style>